<template>
    <div class="base-check-tag-list">
        <el-check-tag v-for="item in list" :key="item.key" v-bind="filterBind(item)">
            <template v-if="item.render">
                <BaseRender :render="item.render" v-bind="item"></BaseRender>
            </template>
            <template v-else>{{ item.label }}</template>
        </el-check-tag>
    </div>
</template>

<script setup>
import { mergeProps } from 'vue'

const props = defineProps({
    list: {
        type: Array,
        default: () => []
    }
})

const emit = defineEmits(['change'])

const filterBind = item => {
    const { key, label, render, ...args } = item
    return mergeProps({
        checked: false,
        onChange: checked => {
            item.checked = checked
            emit('change', item)
        }
    }, args)
}
</script>

<style lang="scss" scoped>
.base-check-tag-list {
    .el-check-tag {
        margin-right: 10px;

        &:last-child {
            margin-right: 0;
        }
    }
}
</style>